<template>
  <div class='container'>
    <el-card class="card">
       <el-row type="flex" justify="space-between" style="margin-bottom:20px">
         <el-col style="padding-left:20px">
           <div>
           <span style="margin-right:10px">关键字</span>
           <el-input  placeholder="根据编号搜索" v-model="page.keyword" size="small" style="width:200px"></el-input>
          </div>
         </el-col>
         <el-col>
           <el-row type="flex" justify="end">
           <el-button size="small" @click="clearqs">清除</el-button>
           <el-button size="small" type="primary" @click="randoms">搜索</el-button>
          </el-row>
         </el-col>
       </el-row>
       <el-alert
        type="info"
        :closable="false"
        show-icon>
        <div slot="title">数据一共{{total}}条</div>
       </el-alert>
       <el-table
         class="table"
         :data="questionList"
         stripe
         style="width: 100%">
         <el-table-column
           prop="id"
           label="编号"
           width="220"
           align="center"
           >
         </el-table-column>
         <el-table-column
           prop="questionType"
           label="题型"
           :formatter="formatEmployment"
           width="80"
           align="center"
           >

         </el-table-column>
         <el-table-column

           align="center"
           width="220"
           label="题目编号">
           <template slot-scope="{ row }">
              <div v-for="(item,index) in row.questionIDs" :key="index">
               <div @click="detail(item)">
                 <a style="color: rgb(0, 153, 255)" href="javascript:void(0);">{{item.number}}</a>
               </div>
             </div>
           </template>
         </el-table-column>
           <el-table-column
           prop="addTime"
           align="center"
           label="录入时间"
           width="180"
           >
         </el-table-column>
           <el-table-column
           prop="totalSeconds"
           align="center"
           label="答题时间(s)">
         </el-table-column>
           <el-table-column
           prop="accuracyRate"
           align="center"
           label="正确率(%)">
         </el-table-column>
           <el-table-column
           prop="userName"
           align="center"
           label="录入人">
         </el-table-column>
           <el-table-column
           prop="address"
           align="center"
           label="操作">
           <template slot-scope="{ row }">
           <el-button type="danger" size="small" plain icon="el-icon-delete" @click="removeRandoms(row)" circle></el-button>
           </template>
         </el-table-column>
        </el-table>
        <el-pagination
            @size-change="SizeChange"
            @current-change="CurrentChange"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    </el-card>
   <QuestionItemId :dialogVisible="dialogVisible" :questionItem="questionItem" @close="dialogVisible=false"></QuestionItemId>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import QuestionItemId from '../components/questions-preview.vue'
export default {
  components: {
    QuestionItemId
  },
  data () {
    return {
      questionList: [],
      page: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      total: 0,
      questionID: [],
      questionItem: {},
      dialogVisible: false
    }
  },
  methods: {
    // 渲染列表
    async randoms () {
      const { data } = await randoms(this.page)
      this.questionList = data.items
      this.total = data.counts
    },
    // 根据ID删除组题
    async removeRandoms (row) {
      try {
        await this.$confirm('是否删除此组题', '提示')
        await removeRandoms(row)
        this.$message.success('删除成功')
        this.randoms()
      } catch (error) {
        this.$message.info('已取消删除')
      }
    },
    // 清除功能
    clearqs () {
      this.page = {
        page: 1,
        pagesize: 20,
        keyword: ''
      }
      // 重新获取数据
      this.randoms()
    },
    // 当前显示数量改变时触发
    SizeChange (val) {
      this.page.pagesize = val
      this.randoms()
    },
    // 页码改变时触发
    CurrentChange (val) {
      this.page.page = val
      this.randoms()
    },
    formatEmployment (row, column, cellValue, index) {
      const obj = questionType.find(item => parseInt(item.value) === parseInt(cellValue))

      return obj ? obj.label : '未知'
    },
    async detail (item) {
      const { data } = await detail(item)
      this.questionItem = data
      this.dialogVisible = true
    }

  },
  created () {
    this.randoms()
  }
}
</script>

<style scoped lang='scss'>
 .card{
 padding: 0 10px;
 margin: 10px 10px;
 span{
    font-size: 14px;
    font-weight: 700;
 }
 .table{
   margin: 20px 0;
 }
 }
</style>
